<template>
    <ele-modal width="880px" :visible="visible" :append-to-body="true" :close-on-click-modal="true"
        custom-class="ele-dialog-form" :title="isUpdate ? '修改app' : '添加app'" @update:visible="updateVisible">
        <el-form ref="form" :model="form" :rules="rules" label-width="82px">
            <el-row :gutter="15">
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="app名称:" prop="name">
                        <el-input clearable :maxlength="100" v-model="form.name" placeholder="请输入app名称" />
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="类型:" prop="type">
                        <el-select clearable class="ele-block" v-model="form.type" placeholder="请选择类型">
                            <el-option label="推荐" :value="1" />
                            <el-option label="破解" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="状态:" prop="status">
                        <el-select clearable class="ele-block" v-model="form.status" placeholder="请选择状态">
                            <el-option label="隐藏" :value="0" />
                            <el-option label="显示" :value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="应用地址:" prop="href">
                        <el-input clearable :maxlength="200" v-model="form.href" placeholder="请输入应用地址" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="顺序:" prop="index">
                        <el-input-number :min="1" style="width: 100%" v-model.number="form.index" :controls="false"
                            placeholder="请输入顺序" />
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="三方图片:" prop="remoteUrl">
                        <el-input v-model="form.remoteUrl" placeholder="请输入三方图片地址" />
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="应用图标:" prop="img">
                        <el-upload class="upload-box avatar-uploader" action="#" :show-file-list="false"
                            :on-change="(file, fileList) => onUloadChange(file, fileList, form.img)"
                            style="font-size: 30px">
                            <img :src="form.img" alt="" v-if="form.img" style="width: 120px;height: 120px;" />
                            <i v-else class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="备注:" prop="remark">
                        <el-input :rows="4" clearable type="textarea" :maxlength="200" v-model="form.remark"
                            placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template v-slot:footer>
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" :loading="loading" @click="save">
                保存
            </el-button>
        </template>
    </ele-modal>
</template>

<script>
import { addApp, updateApp } from "@/api/appList";
import { fileToBase64 } from "@/utils/formate";
export default {
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            _id: null,
            name: "",
            type: 1,
            status: 1,
            href: "",
            remark: "",
            index: 1,
            remoteUrl: "",
            img: ""
        };
        return {
            defaultForm,
            // 表单数据
            form: { ...defaultForm },
            // 表单验证规则
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入应用名称',
                        trigger: 'blur'
                    }
                ],
                type: [
                    {
                        required: true,
                        message: '请选择类型',
                        trigger: 'blur'
                    }
                ],
                status: [
                    {
                        required: true,
                        message: '请选择状态',
                        trigger: 'blur'
                    }
                ],
                href: [
                    {
                        required: true,
                        message: '请输入应用地址',
                        trigger: 'blur'
                    }
                ],
                index: [
                    {
                        required: true,
                        message: '请输入顺序',
                        trigger: 'blur'
                    }
                ],
                img: [
                    {
                        required: true,
                        message: '请上传应用图标',
                        trigger: 'change'
                    }
                ]
            },
            // 提交状态
            loading: false,
            // 是否是修改
            isUpdate: false
        };
    },
    computed: {
        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },
    watch: {
        visible(visible) {
            if (visible) {
                if (this.data) {
                    let data = { ...this.data }
                    this.$util.assignObject(this.form, {
                        ...data,
                        // roleIds: this.data.roles.map((d) => d.roleId),
                        // password: ''
                    });
                    this.isUpdate = true;
                } else {
                    this.isUpdate = false;
                }
            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    },
    methods: {
        // 上传图片
        onUloadChange(file, _, item) {
            if (file.size >= 1024 * 1024 * 400) {
                this.$message.error("最大上传限制400MB！");
                return;
            }
            fileToBase64(file.raw).then(res => {
                this.form.img = res;
            })
        },
        /* 保存编辑 */
        save() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.loading = true;
                const data = {
                    ...this.form
                };


                // return
                const saveOrUpdate = this.isUpdate ? updateApp : addApp;
                saveOrUpdate(data)
                    .then((res) => {
                        console.log('结果', res);
                        this.loading = false;
                        this.$message.success('保存成功');
                        this.updateVisible(false);
                        this.$emit('done');
                    })
                    .catch((msg) => {
                        this.loading = false;
                        this.$message.error(msg);
                    });
            })
        },


        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value);
        },
    },

}
</script>
<style lang="scss" scoped>
.upload-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 120px;
    height: 120px;
    background: #fff;
    font-size: 12px;
    color: #cccccc;
    border: 1px dashed #ccc;

    .iconfont {
        font-size: 16px;
    }
}
</style>